﻿@{
    ViewBag.Title = "Home Page";
    Layout = null;
}
<!--
    comment by dhenskr 2013-08-29
    the tabs will always scrolling when the spcify the doctype html
    <!DOCTYPE html>-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Hopewell Rental System</title>
    <link href="~/Content/js/jquery-easyui/themes/metro/easyui.css" rel="stylesheet"
        type="text/css" />
    <link href="~/Content/js/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/960/code/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/960/code/css/text.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/960/code/css/960.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/960_custom.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/cust.css" rel="stylesheet" type="text/css" />
    <script src="~/Content/js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="~/Content/js/jquery/jquery.formatDateTime.js" type="text/javascript"></script>
    <script src="~/Content/js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="~/Content/js/knockout/knockout-2.2.1.js" type="text/javascript"></script>
    <script src="~/Content/js/knockout/knockout.mapping-latest.js" type="text/javascript"></script>
    <script src="~/Content/js/core/utils.js" type="text/javascript"></script>
    <script src="~/Content/js/core/com.js" type="text/javascript"></script>
    <script src="~/Content/js/core/koLib.js" type="text/javascript"></script>
    <script src="~/Content/js/viewModel/index.js" type="text/javascript"></script>
    <link href="~/Content/js/jquery-ui-1.10.3/themes/base/jquery.ui.all.css" rel="stylesheet"
        type="text/css" />
    <script src="~/Content/js/jquery-ui-1.10.3/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="~/Content/js/jquery-ui-1.10.3/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="~/Content/js/jquery-ui-1.10.3/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
        
        $( document ).ready( function () {
            
            Utils.log('[{0}] start load menus'.format(Utils.getDateTime()));
            
            //loadMenus(data.menus);
            loadNavMenus(data.menus);
            
            Utils.log('[{0}] end load menus'.format(Utils.getDateTime()));

            $("#signout").button().click(function( event ) {
				event.preventDefault();
			});
            $("#cbbTheme").combobox("setValue",Utils.getCookie("theme"));
            $("#cbbTheme").combobox({onSelect:function(){
            var value = $("#cbbTheme").combobox("getValue");
             com.message("confirm","This will reload the page, are you sure you want to change the theme?",function(b){
             if(b){
             Utils.setCookie("theme",value);
                window.location.reload();
             }else{
            $("#cbbTheme").combobox("setValue",Utils.getCookie("theme"));
             }
             });
            }});
        } );
        
        function loadMenus(menus) {
            var parents = $.grep(menus, function(menu, index) {
                return !menu.menu_parent; 
            });
            $.each(parents, function(index,menu) {
                var ul = document.createElement("ul");
                ul.style.padding = '8px';
                ul.className = 'easyui-tree';
                $("#menu").accordion("add",{title:menu.menu_name,content:ul,selected:true});
                var json = getChildren(menus, menu.menu_code);
                $(ul).tree({data:json});
                
                $(ul).tree({onSelect:function(node) {
                    addTab(node.text, node.attributes.url);
                }});
            } );
        }
        
        function loadNavMenus(menus) {
            var parents = $.grep(menus, function(menu, index) {
                return !menu.menu_parent; 
            });
            $.each(parents, function(index,menu) {
                //<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">System</a>

                var div = document.createElement("div");
                div.style.width = 150;
                div.id = "m_" + menu.menu_code;
                var json = getChildren(menus, menu.menu_code);
                $.each(json, function(idx, m) {
                    $(div).append("<div data-options='iconCls:\"{0}\"' url='{1}' onclick='addTab(\"{2}\",\"{1}\")'>{2}</div>".format(m.iconCls,m.attributes.url,m.text));
                });
                $(div).appendTo("#menu_container");
                $("#nav-menu").append("<a id='a_{0}'>{1}</a>".format(menu.menu_code,menu.menu_name));
                $("#a_" + menu.menu_code).menubutton({
                    iconCls:menu.icon_cls,
                    menu:'#m_' + menu.menu_code
                });
                
            } );
        }
       
        
        function addTab(title, url) {
            var tabs = $('#tabs');
            
            if (tabs.tabs('exists', title)) {
                tabs.tabs('close', title);
            } 
            var content = '<iframe title=\"'+title+'\" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            tabs.tabs('add', {
                title: title,
                content: content,
                closable: true
            });
        }
        
        function closeTab(title) {
             var tabs = $('#tabs');
            
            if (tabs.tabs('exists', title)) {
                tabs.tabs('close', title);
            } 
           
        }
    

        function getChildren(menus,parentCode) {
            var childJson = [];
            var children = $.grep(menus, function(menu, index) {
                return menu.menu_parent == parentCode;
            });
            $.each(children, function (index,menu) {
                childJson.push({text:menu.menu_name,iconCls : menu.icon_cls, attributes:{url:menu.url},children:getChildren(menus,menu.menu_code) });
            });
            return childJson;
        }
        
       function signout (form) {
        com.showComfirm("comfirm", "Are you sure you want to sign out?", function (b) {
            if (!b) return;

            com.ajax({
                type: "GET",
                url: "/Home/SignOut",
                success: function (retJson) {
                    console.log(retJson);
                    if (retJson && retJson.status === "success") {
                        location.reload();
                    } else {
                        console.log(retJson);
                    }
                }
            });

        });
    };


        this.message = function() {
            return com.topParentMsg.apply(this, arguments);
        };
       
        ko.bindingViewModel(new viewModel(data));

    </script>
    <style type="text/css">
        #userInfoUl
        {
            list-style: none;
            float: right;
        }
        #userInfoUl li
        {
            float: left;
            padding-right: 10px;
            border: 1px solid;
            vertical-align: middle;
        }
        .ui-button
        {
            padding: 2px !important;
            font-size: .7em !important;
        }
        #tableUserInfo td
        {
            padding: 0px 5px 0px 5px;
        }
    </style>
</head>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height: 80px; overflow: hidden" class="page-content">
        <div style="height: 50px;">
            <div style="float: left">
                <img src="./../../Content/images/logo.png" height="40px" />
            </div>
            <div style="float: right; line-height: 30px; margin-top: 10px; min-width: 200px;
                vertical-align: middle">
                <!--<ul id="userInfoUl">
                    <li><span data-bind="html:form.user_name"></span></li>
                    <li><a id="signout" onclick="signout();">Sign Out</a></li>
                    <li><span>Theme: </span></li>
                    <li style="padding-right: 0px;">
                        <select id="cbbTheme" class="easyui-combobox" style="width: 80px;">
                            <option value="default">Default</option>
                            <option value="metro">Metro</option>
                        </select>
                    </li>
                </ul>
                -->
                <table id="tableUserInfo">
                    <tr>
                        <td>
                            <span data-bind="html:form.user_name"></span>
                        </td>
                        <td>
                            <a id="signout" onclick="signout();">Sign Out</a>
                        </td>
                        <td>
                            <span>Theme: </span>
                        </td>
                        <td style="padding-right: 0px;">
                            <select id="cbbTheme" class="easyui-combobox" style="width: 80px;">
                                <option value="default">Default</option>
                                <option value="metro">Metro</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="nav-menu" style="border: 1px solid #ddd; clear: both">
        </div>
        <div id="menu_container" style="display: none">
        </div>
    </div>
    <div data-options="region:'south',split:true" style="height: 28px; overflow: hidden">
        <div class="panel-header panel-title footer">
            Copyright &copy;@DateTime.Now.Year Hopewell, All Rights Reserved
        </div>
    </div>
    <!--<div data-options="region:'west',split:true" title="Menu Navigation" id="nav-menu"
        style="width: 200px;">
        <div id="menu" class="easyui-accordion" data-options="fit:true,border:false">
        </div>
    </div>-->
    <div data-options="region:'center',iconCls:'icon-ok'" class="page-content">
        <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="tabs">
            <div title="Home">
                <p>
                    <h6>
                        Welcome !
                    </h6>
                </p>
            </div>
        </div>
    </div>
</body>
</html>
